<template>
  <div class="info-left">
    <div v-for="(item, index) in publicArr" :key="index" class="info-leftCon">
      <p class="info-release" @click="item.isShow = !item.isShow">
        <span>{{ item.name }}</span>
        <i v-show="item.isShow" class="el-icon-arrow-down"></i>
        <i v-show="!item.isShow" class="el-icon-arrow-right"></i>
      </p>
      <template v-if="item.paramsKey === 'tag'">
        <div v-if="item.isShow" class="custom-tags">
          <div
            v-for="(exposure, i) in item.singleData"
            v-show="i < tagCount"
            :key="i"
            class="custom-tags-item"
            :class="{
              active:
                exposureList.indexOf(
                  `${item.paramsKey} = ${exposure.sourceKey || exposure.key}`
                ) > -1,
            }"
            @click="exposureClick(item, exposure)"
          >
            {{ `${exposure.key}（${exposure.docCount}）` }}
          </div>
          <p
            v-if="item.singleData.length > tagCount"
            class="more"
            @click.stop="tagCount += 10"
          >
            更多
          </p>
        </div>
      </template>
      <template v-else-if="item.paramsKey === 'countryNameAggregation'">
        <div v-if="item.isShow" class="country-tree">
          <el-tree
            :data="item.singleData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="docCount-box">
                {{ data.docCount }}
              </span>
            </template>
          </el-tree>
        </div>
      </template>
      <template v-else>
        <div v-if="item.isShow" class="tags">
          <p
            v-for="(exposure, i) in item.singleData"
            v-show="!item.isMoreShow ? i < count : item.singleData"
            :key="i"
            class="info-leftText"
            :class="{
              active:
                exposureList.indexOf(
                  `${item.paramsKey} = ${exposure.sourceKey || exposure.key}`
                ) > -1,
            }"
            @click="exposureClick(item, exposure)"
          >
            <template v-if="setIcon(item)">
              <img
                :src="iconPrefix(exposure.key)"
                alt=""
                loading="lazy"
                @error="setDefaultImage"
              />
            </template>
            <template v-else>
              <span :title="exposure.key" class="publicKye">
                {{ exposure.key }}</span
              >
            </template>
            <span>{{ exposure.docCount }}</span>
          </p>
          <p
            v-if="!item.isMoreShow && item.singleData.length > count"
            class="more"
            @click.stop="count += 10"
          >
            更多
          </p>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {defineProps,defineEmits, watch,ref,reactive} from 'vue';
import {useStore} from 'vuex';
const emit =defineEmits(['exposureHandle']);
const store=useStore();
const props=defineProps({
  publicData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    category: {
      type: String,
      default: '',
    },
    conditionVal: {
      type: String,
      default: '',
    },
})
const publicArr=ref<any>([]);
const leftList=ref([]);
const exposureList=ref<any>([]);
const count=ref(5);
const tagCount=ref(10);
const twentyCount=ref(20);
const defaultProps=reactive({
  children: 'children',
  label: 'key',
});
  watch(()=>props.publicData,(newVal)=>{
    // props.totalData = newVal
        const keys = Object.keys(newVal)
        const arr:any = []
        const allData = publicCon(newVal, props.category)
        for (let j = 0; j < allData.length; j++) {
          const obj = {
            ...allData[j],
            singleData: allData[j].singleData || [],
            isShow: true,
            isMoreShow: false,
          }
          arr.push(obj)
        }
        publicArr.value = arr
        tagCount.value = 10
  });
  watch(()=>props.conditionVal,(newVal)=>{
    if (!newVal) {
        exposureList.value = []
      }
  })
 const iconPrefix=(url)=> {
      let newUrl = ''
      if (url) {
        const substring = url.substring(4)
        const path = window.location.origin
        newUrl = `${path}/${substring}`

        // newUrl = `/${substring}`
      }
      return newUrl
    }
   const setDefaultImage=(e)=> {
      e.target.src = require('@/static/images/retrieval/full.png')
    }
   const setIcon=(item)=> {
      const showList = [
        'webIconAggregation',
        'operatorsIconAggregation',
        'domainIspIconAggregation',
        'dataSourceIconAggregation',
        'iconAggregation',
      ]
      return showList.includes(item.key)
    }
   const clearClick=()=> {
      leftList.value = []
      exposureList.value = []
      count.value = 5
      twentyCount.value = 20
    }
   const handleNodeClick=(data, node)=> {
      // console.log(data, node)
      let item = {
        paramsKey: 'country_name',
      }
      let res = {
        sourceKey: data.sourceKey,
        key: data.key,
      }
      if (node.level === 2) {
        item = {
          paramsKey: 'region',
        }
      }
      exposureClick(item, res)
    }
   const exposureClick=(item, res)=> {
      const totalKey = `${item.paramsKey}=${res.sourceKey || res.key}`
      const arrIndex = exposureList.value.indexOf(totalKey)
      if (arrIndex > -1) {
        // 取消选中
        exposureList.value.splice(arrIndex, 1)
      } else {
        // 点击选中
        exposureList.value.push(totalKey)
      }

      // 获取当前被选中的类型
      let strVal = ''
      const commonTags = store.state.enum.commonField
      if (commonTags.includes(item.paramsKey)) {
        strVal = `(${item.paramsKey}=="${res.sourceKey || res.key}")`
      } else {
        strVal = `(${props.category}.${item.paramsKey}=="${
          res.sourceKey || res.key
        }")`
      }
      emit('exposureHandle', strVal, arrIndex > -1)
    }
    // moreClick(index) {
    //   this.$set(
    //     this.publicArr[index],
    //     'isMoreShow',
    //     !this.publicArr[index].isMoreShow
    //   )
    // },
   const publicCon=(newVal, type)=> {
      // 通用-start
      const common = [
        {
          key: 'tagAggregation',
          name: '标签',
          paramsKey: 'tag',
          singleData: newVal.tagAggregation,
        },
        {
          key: 'isAliveAggregation',
          name: '存活状态',
          paramsKey: 'is_alive',
          singleData: newVal.isAliveAggregation,
        },
        {
          key: 'dataStatusAggregation',
          name: '数据更新状态',
          paramsKey: 'data_status',
          singleData: newVal.dataStatusAggregation,
        },
        {
          key: 'exposureRiskAggregation',
          name: '暴露风险',
          paramsKey: 'exposure_risk',
          singleData: newVal.exposureRiskAggregation,
        },
        {
          key: 'vulnerabilityAggregation',
          name: '易受攻击性',
          paramsKey: 'vulnerability',
          singleData: newVal.vulnerabilityAggregation,
        },
      ]

      const dataObj = {
        sys: [
          {
            key: 'countryNameAggregation',
            name: '国家/地区',
            paramsKey: 'countryNameAggregation',
            singleData: newVal.countryNameAggregation,
          },
          {
            key: 'webIconAggregation',
            name: 'icon排行',
            paramsKey: 'icon_md5',
            singleData: newVal.webIconAggregation,
          },
          {
            key: 'titleAggregation',
            name: '网站标题排行',
            paramsKey: 'title',
            singleData: newVal.titleAggregation,
          },
          {
            key: 'ipAggregation',
            name: '源ip排行',
            paramsKey: 'ip',
            singleData: newVal.ipAggregation,
          },
          {
            key: 'certAuthorizedDomainAggregation',
            name: '证书排行',
            paramsKey: 'cert_authorized_domain',
            singleData: newVal.certAuthorizedDomainAggregation,
          },
          {
            key: 'asNumberAggregation',
            name: 'ASN',
            paramsKey: 'as_number',
            singleData: newVal.asNumberAggregation,
          },
          {
            key: 'asOrgAggregation',
            name: 'ASN组织',
            paramsKey: 'as_org',
            singleData: newVal.asOrgAggregation,
          },
          {
            key: 'protocolAggregation',
            name: '协议',
            paramsKey: 'protocol',
            singleData: newVal.protocolAggregation,
          },
          {
            key: 'productCategoryAggregation',
            name: '产品类型',
            paramsKey: 'product_category',
            singleData: newVal.productCategoryAggregation,
          },
          {
            key: 'productNameAggregation',
            name: '产品',
            paramsKey: 'product_name',
            singleData: newVal.productNameAggregation,
          },
          {
            key: 'wafAggregation',
            name: 'WAF',
            paramsKey: 'waf',
            singleData: newVal.wafAggregation,
          },
          {
            key: 'cdnAggregation',
            name: 'CDN',
            paramsKey: 'cdn',
            singleData: newVal.cdnAggregation,
          },
          {
            key: 'assetAttackAggregation',
            name: '存在弱点',
            paramsKey: 'asset_attack_type',
            singleData: newVal.assetAttackAggregation,
          },
          {
            key: 'dataSourceAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.dataSourceAggregation,
          },
        ],
        ip: [
          {
            key: 'countryNameAggregation',
            name: '国家/地区',
            paramsKey: 'countryNameAggregation',
            singleData: newVal.countryNameAggregation,
          },
          {
            key: 'operatorsIconAggregation',
            name: 'IP服务商icon',
            paramsKey: 'operators',
            singleData: newVal.operatorsIconAggregation,
          },
          {
            key: 'osAggregation',
            name: '操作系统',
            paramsKey: 'os',
            singleData: props.publicData.osAggregation,
          },
          {
            key: 'asNumberAggregation',
            name: 'ASN',
            paramsKey: 'as_number',
            singleData: newVal.asNumberAggregation,
          },
          {
            key: 'asOrgAggregation',
            name: 'ASN组织',
            paramsKey: 'as_org',
            singleData: newVal.asOrgAggregation,
          },
          {
            key: 'companyAggregation',
            name: '所属单位',
            paramsKey: 'company',
            singleData: newVal.companyAggregation,
          },
          {
            key: 'cdnAggregation',
            name: 'CDN',
            paramsKey: 'cdn',
            singleData: newVal.cdnAggregation,
          },
          {
            key: 'assetAttackAggregation',
            name: '存在弱点',
            paramsKey: 'asset_attack_type',
            singleData: newVal.assetAttackAggregation,
          },
          {
            key: 'dataSourceAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.dataSourceAggregation,
          },
        ],
        domain: [
          {
            key: 'domainIspIconAggregation',
            name: '域名服务商icon',
            paramsKey: 'domain_isp',
            singleData: newVal.domainIspIconAggregation,
          },
          {
            key: 'domainIspAggregation',
            name: '域名服务商',
            paramsKey: 'domain_isp',
            singleData: newVal.domainIspAggregation,
          },
          {
            key: 'icpNumberAggregation',
            name: 'ICP备案',
            paramsKey: 'icp_number',
            singleData: newVal.icpNumberAggregation,
          },
          {
            key: 'companyAggregation',
            name: '所属单位',
            paramsKey: 'company',
            singleData: newVal.companyAggregation,
          },
          {
            key: 'assetAttackAggregation',
            name: '存在弱点',
            paramsKey: 'asset_attack_type',
            singleData: newVal.assetAttackAggregation,
          },
          {
            key: 'dataSourceAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.dataSourceAggregation,
          },
        ],
        app: [
          {
            key: 'appTypeAggregation',
            name: '移动应用类型',
            paramsKey: 'app_type',
            singleData: newVal.appTypeAggregation,
          },
          {
            key: 'keywordAggregation',
            name: '命中关键词',
            paramsKey: 'keyword',
            singleData: newVal.keywordAggregation,
          },
          {
            key: 'sourceNameAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.sourceNameAggregation,
          },
        ],
        code: [
          {
            key: 'dataSourceIconAggregation',
            name: '泄漏源icon',
            paramsKey: 'source_name',
            singleData: newVal.dataSourceIconAggregation,
          },
          {
            key: 'titleAggregation',
            name: '代码/文件名称',
            paramsKey: 'title',
            singleData: newVal.titleAggregation,
          },
          {
            key: 'sourceUrlAggregation',
            name: '泄露源地址',
            paramsKey: 'source_url',
            singleData: newVal.sourceUrlAggregation,
          },
          {
            key: 'fileTypeAggregation',
            name: '文件类型',
            paramsKey: 'file_type',
            singleData: newVal.fileTypeAggregation,
          },
          {
            key: 'usernameAggregation',
            name: '泄露账号',
            paramsKey: 'username',
            singleData: newVal.usernameAggregation,
          },
          {
            key: 'leakTypeAggregation',
            name: '泄露类型',
            paramsKey: 'leak_type',
            singleData: newVal.leakTypeAggregation,
          },
          {
            key: 'sourceNameAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.sourceNameAggregation,
          },
        ],
        business: [
          {
            key: 'iconAggregation',
            name: '公司logo',
            paramsKey: 'name',
            singleData: newVal.iconAggregation,
          },
          {
            key: 'regStatusAggregation',
            name: '是否存续',
            paramsKey: 'reg_status',
            singleData: newVal.regStatusAggregation,
          },
          {
            key: 'dataSourceTypeAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.dataSourceTypeAggregation,
          },
        ],
        supplier: [
          {
            key: 'iconAggregation',
            name: '公司logo',
            paramsKey: 'name',
            singleData: newVal.iconAggregation,
          },
          {
            key: 'winnerSuplierAggregation',
            name: '中标供应商',
            paramsKey: 'name',
            singleData: newVal.winnerSuplierAggregation,
          },
          {
            key: 'sourceNameAggregation',
            name: '泄漏源',
            paramsKey: 'data_source',
            singleData: newVal.sourceNameAggregation,
          },
        ],
        darknet: [
          {
            key: 'sourceTypeAggregation',
            name: '暗网事件',
            paramsKey: 'darknet_event',
            singleData: newVal.sourceTypeAggregation,
          },
          {
            key: 'dataTypeAggregation',
            name: '数据类型',
            paramsKey: 'type',
            singleData: newVal.dataTypeAggregation,
          },
          {
            key: 'sourceAggregation',
            name: '来源站点',
            paramsKey: 'data_source',
            singleData: newVal.sourceAggregation,
          },
          {
            key: 'hitWordAggregation',
            name: '命中关键词',
            paramsKey: 'hit_word',
            singleData: newVal.hitWordAggregation,
          },
        ],
      }
      return [...common, ...dataObj[type]]
    }
</script>

<style lang="scss" scoped>
.info-left {
  .info-leftCon {
    margin: 0px 12px;
    border-bottom: 1px solid $-v-color-border-light;
    padding: 10px 0;
    cursor: pointer;
    .info-release {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-left: 0;
      // color: #c0c8e1;
      font-weight: 600;
      // line-height: 30px;
      margin-bottom: 10px;
    }
    .info-leftText {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      line-height: 25px;
      letter-spacing: -0.35px;
      // color: #8590b3;
      line-height: 30px;
      .publicKye {
        display: inline-block;
        width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        width: 24px;
        height: 24px;
        border-radius: 4px;
      }
    }
    .info-leftText:hover {
      color: $-v-color-primary;
    }
    .more {
      font-family: SourceHanSansCN-Regular;
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: -0.35px;
      color: $-v-color-primary;
    }

    .custom-tags {
      display: flex;
      flex-wrap: wrap;
      &-item {
        padding: 0 0 0 8px;
        margin-right: 4px;
        margin: 5px 0;
        margin-right: 5px;
        min-height: 25px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0em;
        line-height: 23px;
        color: #8590b3;
        background: rgba(210, 222, 235, 0.1);
        border: 1px solid rgba(210, 222, 235, 0.5);
        border-radius: 4px;
        word-break: break-all;
      }
      &-item:hover {
        color: $-v-color-primary;
        border: 1px solid $-v-color-primary;
        background: rgba(58, 125, 255, 0.1);
      }
      .more {
        margin-top: 10px;
        flex: 0 0 100%;
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgb(133, 144, 179);
}
</style>
